<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
gauge = anychart.circularGauge();
gauge.container('container');
gauge
.title('Wind Direction Gauge')
.fill('#FFF');
gauge.data([120])
.padding('2%')
.circularPadding('30%')
gauge.axis().scale()
.minimum(0)
.maximum(360)
.ticks({interval: 40});
gauge.axis()
.fill('rgb(177,177,177)')
.startAngle(0)
.sweepAngle(-360)
.width('10%')
.ticks({fill: '#000', position: 'o', length: 8})
.labels()
.position('o')
.textFormatter(function(){ return this.value + '\u00B0';});
gauge.marker()
.size('10%')
.radius('105%');
var a = gauge.data().getIterator();
a.select(gauge.marker().dataIndex());
gauge.label()
.text('Wind Direction:\n'+ a.get('value') +'\u00B0 (+/- 0.5\u00B0)')
.hAlign('center')
.anchor('center')
.padding(10)
.background({
fill: {keys: ['#FFF','#EEE','#FFF'], angle: 90},
stroke: '1px #000',
cornerType: 'round',
corners: 10
});
gauge.draw();
});
</script>
</body>
</html>